<template>
  <view class="interactions-page">
    <!-- 导航栏 -->
    <!-- <view class="navbar">
      <view class="back-btn" @click="navigateBack">
        <icon type="left" size="24" color="#333"></icon>
      </view>
      <view class="navbar-title">
        <text>互动消息</text>
      </view>
      <view class="empty-view"></view>
    </view> -->
    
    <!-- 消息类型切换 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'all' }"
        @click="switchTab('all')"
      >
        <text>全部</text>
        <view class="tab-badge" v-if="newCounts.all > 0">{{ newCounts.all }}</view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'like' }"
        @click="switchTab('like')"
      >
        <text>点赞</text>
        <view class="tab-badge" v-if="newCounts.like > 0">{{ newCounts.like }}</view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'comment' }"
        @click="switchTab('comment')"
      >
        <text>评论</text>
        <view class="tab-badge" v-if="newCounts.comment > 0">{{ newCounts.comment }}</view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'collect' }"
        @click="switchTab('collect')"
      >
        <text>收藏</text>
        <view class="tab-badge" v-if="newCounts.collect > 0">{{ newCounts.collect }}</view>
      </view>
    </view>
    
    <!-- 消息列表 -->
    <view class="interactions-list">
      <view 
        class="interaction-item" 
        v-for="(item, index) in filteredItems" 
        :key="index"
        :class="{ unread: item.unread }"
      >
        <view class="user-info">
          <image :src="item.avatar" mode="widthFix" class="user-avatar"></image>
          <text class="interaction-desc">
            <text class="user-name">{{ item.userName }}</text>
            <text class="desc-text">
              {{ item.type === 'like' ? '赞了你的' : 
                item.type === 'comment' ? '评论了你的' : 
                '收藏了你的' }}
              {{ item.contentType === 'article' ? '文章' : '微头条' }}
            </text>
          </text>
        </view>
        
        <view class="content-preview">
          <text class="content-title">{{ item.contentTitle }}</text>
          
          <!-- 评论内容（仅评论类型显示） -->
          <view class="comment-content" v-if="item.type === 'comment'">
            <text>{{ item.commentText }}</text>
          </view>
          
          <!-- 微头条图片预览 -->
          <view class="content-images" v-if="item.contentType === 'micro' && item.images && item.images.length > 0">
            <image :src="img" mode="widthFix" class="content-img" v-for="(img, imgIndex) in item.images" :key="imgIndex"></image>
          </view>
        </view>
        
        <text class="interaction-time">{{ item.time }}</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredItems.length === 0">
        <image src="https://picsum.photos/id/20/100" mode="widthFix" class="empty-img"></image>
        <text class="empty-text">暂无{{ currentTab === 'all' ? '' : 
          currentTab === 'like' ? '点赞' : 
          currentTab === 'comment' ? '评论' : '收藏' }}消息</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的标签
      currentTab: 'all',
      
      // 新消息计数
      newCounts: {
        all: 8,
        like: 5,
        comment: 2,
        collect: 1
      },
      
      // 所有互动消息
      interactions: [
        // 点赞
        { 
          id: 101, 
          type: 'like',
          unread: true,
          userId: 201, 
          userName: '小丽', 
          avatar: 'https://picsum.photos/id/1083/200', 
          contentId: '1002', 
          contentTitle: 'Vue开发最佳实践分享', 
          contentType: 'article', 
          time: '刚刚'
        },
        { 
          id: 102, 
          type: 'like',
          unread: true,
          userId: 202, 
          userName: '小强', 
          avatar: 'https://picsum.photos/id/1084/200', 
          contentId: '2002', 
          contentTitle: '今天分享一个超实用的小技巧，大家可以试试...', 
          contentType: 'micro', 
          images: ['https://picsum.photos/id/237/200'],
          time: '20分钟前'
        },
        { 
          id: 103, 
          type: 'like',
          unread: false,
          userId: 203, 
          userName: '小芳', 
          avatar: 'https://picsum.photos/id/1062/200', 
          contentId: '1003', 
          contentTitle: 'Uniapp跨平台开发经验总结', 
          contentType: 'article', 
          time: '昨天'
        },
        
        // 评论
        { 
          id: 201, 
          type: 'comment',
          unread: true,
          userId: 204, 
          userName: '小亮', 
          avatar: 'https://picsum.photos/id/1074/200', 
          contentId: '2003', 
          contentTitle: '周末去爬山拍的照片，风景不错！', 
          contentType: 'micro', 
          images: ['https://picsum.photos/id/10/200', 'https://picsum.photos/id/11/200'],
          commentText: '这是哪里呀？看起来风景真好！',
          time: '30分钟前'
        },
        { 
          id: 202, 
          type: 'comment',
          unread: true,
          userId: 205, 
          userName: '小华', 
          avatar: 'https://picsum.photos/id/1066/200', 
          contentId: '1004', 
          contentTitle: 'JavaScript性能优化指南', 
          contentType: 'article', 
          commentText: '写得很详细，学到了很多，谢谢分享！',
          time: '1小时前'
        },
        
        // 收藏
        { 
          id: 301, 
          type: 'collect',
          unread: true,
          userId: 206, 
          userName: '小明', 
          avatar: 'https://picsum.photos/id/1076/200', 
          contentId: '1001', 
          contentTitle: '前端工程化实践方案', 
          contentType: 'article', 
          time: '2小时前'
        },
        { 
          id: 302, 
          type: 'collect',
          unread: false,
          userId: 207, 
          userName: '小红', 
          avatar: 'https://picsum.photos/id/1069/200', 
          contentId: '2001', 
          contentTitle: '推荐几个实用的开发工具', 
          contentType: 'micro', 
          time: '3天前'
        },
        { 
          id: 303, 
          type: 'collect',
          unread: false,
          userId: 208, 
          userName: '小刚', 
          avatar: 'https://picsum.photos/id/1077/200', 
          contentId: '1005', 
          contentTitle: 'CSS布局技巧大全', 
          contentType: 'article', 
          time: '1周前'
        }
      ]
    };
  },
  
  computed: {
    // 根据当前标签筛选消息
    filteredItems() {
      if (this.currentTab === 'all') {
        return this.interactions;
      }
      return this.interactions.filter(item => item.type === this.currentTab);
    }
  },
  
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 切换消息类型标签
    switchTab(tab) {
      this.currentTab = tab;
      // 切换标签时清除对应类型的未读计数
      this.newCounts[tab] = 0;
      // 标记该类型的消息为已读
      this.interactions.forEach(item => {
        if (tab === 'all' || item.type === tab) {
          item.unread = false;
        }
      });
    }
  }
};
</script>

<style scoped>
.interactions-page {
  background-color: #f5f5f7;
  min-height: 100vh;
  padding-top: 44px; /* 预留导航栏高度 */
}

/* 导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 0 15px;
  border-bottom: 1px solid #eee;
  z-index: 99;
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  flex: 1;
  text-align: center;
}

.navbar-title text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.empty-view {
  width: 40px;
  height: 40px;
}

/* 标签切换 */
.tabs {
  display: flex;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 98;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  position: relative;
  font-size: 16px;
  color: #666;
}

.tab-item.active {
  color: #007aff;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #007aff;
}

.tab-badge {
  width: 18px;
  height: 18px;
  background-color: #ff3b30;
  border-radius: 50%;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}

/* 消息列表 */
.interactions-list {
  padding: 15px;
  margin-top: 48px; /* 预留标签栏高度 */
}

.interaction-item {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.interaction-item.unread {
  background-color: #f0f7ff;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

.interaction-desc {
  font-size: 14px;
  color: #666;
}

.user-name {
  color: #333;
  font-weight: 500;
}

.content-preview {
  margin-bottom: 10px;
}

.content-title {
  font-size: 15px;
  color: #333;
  line-height: 1.5;
  display: block;
  margin-bottom: 8px;
}

.comment-content {
  background-color: #f5f5f5;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}

.content-images {
  display: flex;
  gap: 8px;
}

.content-img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
}

.interaction-time {
  font-size: 12px;
  color: #999;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}

.empty-img {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  opacity: 0.5;
  border-radius: 50%;
}

.empty-text {
  font-size: 16px;
  color: #999;
}
</style>
    